<template>
<div class="app-container">
<!--  搜索栏-->
  <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
    <el-form-item  label="活动名称" prop="eventName">
      <el-input
        v-model="queryParams.eventName"
        placeholder="请输入活动名称"
        clearable
        size="small"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item  label="活动要求" prop="eventRequirement">
      <el-input
        v-model="queryParams.eventRequirement"
        placeholder="请输入活动要求"
        clearable
        size="small"
        @keyup.enter.native="handleQuery"
      />
    </el-form-item>
    <el-form-item label="类型" prop="eventTypeId">
      <el-select  v-model="queryParams.eventTypeId" placeholder="活动类型">
        <el-option
          v-for="(item,index) in eventTypeOptions"
          :key="index"
          :label="item"
          :value="index+1"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
<!--展示活动详情-->
  <el-dialog  title="活动详细" :visible.sync="openView" width="700px" append-to-body>
    <el-form ref="form" :model="form" label-width="120px" size="mini">
      <el-row>
        <el-col :span="12">
          <el-form-item v-if="form.sysEventType" label="活动类型:">{{form.sysEventType.typeName}}</el-form-item>
          <el-form-item label="活动名称:">{{ form.eventName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间:">{{ form.eventStart }}</el-form-item>
          <el-form-item label="结束时间:">{{ form.eventEnd }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动人数:">{{ form.eventPeoples}}</el-form-item>
          <el-form-item label="活动要求:" >{{ form.eventRequirement }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="已报名人数:">{{ form.eventRdpeoples }}</el-form-item>
          <el-form-item label="活动图片:">
            <el-image style="width: 100%;height:100%"
                      fit="scale-down"
                      :initial-index="0"
                      :src="srcList[0]"
                      :preview-src-list="srcList">
              <template slot="error">
                <el-image style=" width:100%;height: 100%"
                          src="https://s3.bmp.ovh/imgs/2022/04/03/dd0bb97b2a9bf8b0.png"
                ></el-image>
              </template>
            </el-image>
          </el-form-item>

        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="openView = false">关 闭</el-button>
    </div>
  </el-dialog>
  <el-row :gutter="20" class="el-row">
  <el-col  class="el-col" :span="8" v-for="(item,index) in cardData" :key="index">
    <imgCard>
      <!--    活动图片-->
      <el-image
        slot="img"
        :src="item.eventImg"
        style="width: 100%;height: 100%;"
        :preview-src-list="srcList"
        @click="addImg(item.eventImg)"
      >
        <template slot="error">
          <el-image style=" width:100%;height: 100%"
                    src="https://s3.bmp.ovh/imgs/2022/04/03/dd0bb97b2a9bf8b0.png"
          ></el-image>
        </template>
      </el-image>
<!--      活动内容-->
      <template slot="content">
        <div >
          <span class="content-title" >活动名称——</span>{{item.eventName}}<br>
          <span class="content-title" >活动要求:</span>{{item.eventRequirement}}
          <span
            style="float: right"
          ><el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleView(index)"
          >活动详情</el-button>
        <el-button
          icon="el-icon-plus"
          type="text"
          class="button"
          @click="handleSign(index)">报名</el-button></span>
        </div>
      </template>
    </imgCard>
  </el-col>

</el-row>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    :page-sizes=[9,18,27,36]
    @pagination="getList"
  />

</div>

</template>

<script>
import imgCard from "@/views/volunteer/show/imgCard";
import {getEvent, listEvent, showEvent} from "@/api/volunteer/event";
import {reportUserEvent, Test} from "@/api/volunteer/user";
import {getInfo} from "@/api/login";
import {listType} from "@/api/volunteer/type";
export default {
  name: "Show",
  components:{
    imgCard
  },
  data() {
    return{
      total:0,
      cardData:null,
      // 遮罩层
      loading: true,
      //显示搜索条件
      showSearch: true,
      userId:null,
      openView:false,
      //事件类型
      eventTypeOptions:[],
      form:{},
      //图片列表
      srcList:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:9,
        eventName: null,
        eventLocation: null,
        eventPeoples: null,
        eventStart: null,
        eventEnd: null,
        eventStatus: null,
        eventRequirement: null,
        eventTypeId:null
      },
      imgList:[],
      eventRequestList:[],
      eventNameList:[]
    }
  },
  created() {

  this.getList();
  this.getTypeOptions()
  },

  methods:{
    addImg(val){
      this.srcList=[]
      this.srcList.push(val)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 报名按钮*/
    handleSign(index) {
      getInfo().then(response => {
        return response.user
      }).then((data) => {
        this.$data.userId = data.userId
      });
      this.$confirm('是否报名活动' + this.cardData[index].eventName + '?','提示',{
        confirmButtonText:'是',
        cancelButtonText:'否',
        type:'warning'
      }).then(
        () => {
          //报名
          reportUserEvent(this.cardData[index].eventId,this.$data.userId).then((response)=>{
            this.getList()
            this.$modal.msgSuccess('报名成功')
          })})
    },
    /** 获取发布中的事件类型*/
    getTypeOptions(){
      listType().then((response)=>{
        let options=response.rows.map(obj=>{return obj.typeName})
        this.eventTypeOptions=options
      })
    },
    /** 详细按钮 */
    handleView(index){
      const req={
        eventId:this.cardData[index].eventId
      }
      showEvent(req).then(response => {
        this.form = response.rows[0];
        this.srcList=[]
        this.srcList.push(this.form.eventImg)
        this.openView = true;
      })
    },
    getList() {
      this.loading = true;
      showEvent(this.queryParams).then(response => {
        this.cardData=response.rows
        this.imgList=response.rows.map(obj=>{return obj.eventImg})
        this.total = response.total;
        this.loading = false;
      });
    },
  }
}

</script>

<style scoped>
.el-row {
  margin: 20px;
  display:flex;
  flex-wrap:wrap;
}
.el-col{
  height: 100%;
}
.content-title {
  font-style: oblique;
  font-weight: bold
}
</style>
